import { Form, Input, Select, Image, Modal } from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import store from '../../store/index';
import {observer} from 'mobx-react';
import "../Vehicle_information_management/VehicleInformationAdd.scss";
import './VisitorAdd.scss';
import {useEffect} from 'react';
const { Option } = Select;
const { confirm } = Modal;
//转换时间格式
const toTime = (value) => {
  let date = new Date(value)
  let y = date.getFullYear()  //获取年份
  let m = date.getMonth() + 1  //获取月份ma
  m = m < 10 ? "0" + m : m  //月份不满10天显示前加0
  let d = date.getDate()  //获取日期
  d = d < 10 ? "0" + d : d  //日期不满10天显示前加0
  return y + "-" + m + "-" + d

}
const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 14,
    },
  };
  const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
    },
  };
export const VisitorDetails = ({ setState }) => {
  useEffect(()=>{
    visitorForm.setFieldsValue({
      visName:store.dongji.visitorDetails.visName,
      visPhone:store.dongji.visitorDetails.visPhone,
      visSex:store.dongji.visitorDetails.visSex==0?'女':'男',
      visEducation:store.dongji.visitorDetails.visEducation,
      visVect:store.dongji.visitorDetails.visVect
    });
    companyForm.setFieldsValue({
      vireType:store.dongji.visitorDetails.visitRecord.vireType,
      vireName:store.dongji.visitorDetails.visitRecord.vireName,
      vireFloor:store.dongji.visitorDetails.visitRecord.vireFloor,
      vireStarttime:toTime(store.dongji.visitorDetails.visitRecord.vireStarttime),
    });
    companyForms.setFieldsValue({
      vireEndtime:toTime(store.dongji.visitorDetails.visitRecord.vireEndtime),
      vireRoom:store.dongji.visitorDetails.visitRecord.vireRoom,
      virePhone:store.dongji.visitorDetails.visitRecord.virePhone,
      vireUnit:store.dongji.visitorDetails.visitRecord.vireUnit
    })
  },[])
  //返回主页面
  const backCar = () => {
    setState(1);
  };
  const quxiao = () => {
    confirm({
      icon: <ExclamationCircleOutlined />,
      content: "您确定离开此页面吗？",
      cancelText: "取消",
      okText: "确定",
      onOk() {
        console.log("OK");
        backCar();
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  }; 
  const [visitorForm] = Form.useForm();
  const [companyForm] = Form.useForm();
  const [companyForms] = Form.useForm();
    return (
        <div className="xinzeng visitorAdd">
        <div>
          <div className="tit">
            <div>
              <div>
                <div></div>
                <div>访客信息详情</div>
              </div>
            </div>
            <div>
              <span className="iconfont icon-a-16guanbi" onClick={quxiao}></span>
            </div>
          </div>
          <hr></hr>
          <div className="content">
            <div>
              <p>访客基本信息:</p>
              <Form
                {...layout}
                form={visitorForm}
                name="control-hooks"
              >
                <Form.Item
                  name="visName"
                  label="人员名称"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input disabled />
                </Form.Item>
                <Form.Item
                  name="visPhone"
                  label="联系方式"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input disabled />
                </Form.Item>
                <Form.Item
                  name="visSex"
                  label="访客性别"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                   <Select placeholder='请选择' className='select' disabled >
                                <Option value="0">男</Option>
                                <Option value="1">女</Option>
                            </Select>
                </Form.Item>
                <Form.Item
                  name="visEducation"
                  label="访客学历"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input disabled />
                </Form.Item>
                
                <Form.Item
                  name="visVect"
                  label="绑定微信号："
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input disabled />
                </Form.Item>
                <Form.Item
                  name="visFace"
                  label="人脸照片"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Image
                    width={100}
                  />
                </Form.Item>
              </Form>
            </div>
            <div>
              <p>造访单位信息:</p>
              <div className="visitor">
                <div>
                  <Form
                    {...layout}
                    form={companyForm}
                    name="control-hooks"
                  >
                   
                    <Form.Item
                      name="vireType"
                      label="造访类型"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Select allowClear disabled >
                        <Option value="linshi">企业</Option>
                        <Option value="baoyue">租户</Option>
                      </Select>
                    </Form.Item>
                    <Form.Item
                      name="vireName"
                      label="负责人姓名"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input disabled  />
                    </Form.Item>
                    <Form.Item
                      name="vireFloor"
                      label="所属楼宇"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Select disabled 
                        // placeholder=""
                        allowClear
                        // defaultValue="临时车"
                      >
                        <Option value="linshi">A1幢</Option>
                        <Option value="baoyue">A2幢</Option>
                        <Option value="baoyue">A3幢</Option>
                      </Select>
                    </Form.Item>
                    <Form.Item
                      name="vireStarttime"
                      label="造访时间"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                        <Input type='date' disabled />
                    </Form.Item>
                    {/* <Form.Item >
                                  <Button type="primary" htmlType="submit">
                                      Submit
                                  </Button>
                              </Form.Item> */}
                  </Form>
                </div>
                <div>
                  <Form
                    {...layout}
                    form={companyForms}
                    name="control-hooks"
                  >
                    <Form.Item
                      name="vireUnit"
                      label="单位名称"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input disabled ></Input>
                    </Form.Item>
                    <Form.Item
                      name="virePhone"
                      label="联系方式"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input disabled />
                    </Form.Item>
                    <Form.Item
                      name="vireRoom"
                      label="房间名称"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input disabled />
                    </Form.Item>
                    <Form.Item
                      name="vireEndtime"
                      label="结束时间"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                        <Input type='date'disabled />
                    </Form.Item>
                  </Form>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div> 
    )
}


export default observer(VisitorDetails)
